<template>
    <div class="bg">
        <div class="top">
            <div class="topw">教师信息</div>
            <div class="topd">
            </div>
        </div>
        <div>
            <table>
                <tr style="height: 170px">
                    <td style="width: 50px"></td>
                    <td style="text-align: left;width: 100px">讲师头像:</td>
                    <td style="width: 50px"></td>
                    <td><img width="200px" height="120px" :src="Info.avatar">
                        <div v-show="updateUser" style="width: 230px;height: 46px;position: relative;left: 0">
                            <div id="imgdv">
                                <span id="imgsp">选择头像</span>
                                <input type="file" id="uploadImage" placeholder="点击上传" accept="image/jpeg,image/png"/>
                            </div>
                            <span class="el-upload__tip">
                                仅支持jpg或png格式文件
                            </span>
                        </div>
                    </td>
                </tr>
                <tr style="height: 50px">
                    <td style="width: 50px"></td>
                    <td style="text-align: left;width: 100px">讲师昵称:</td>
                    <td style="width: 50px"></td>
                    <td>
                        <el-input v-show="updateUser" v-model="Info.name" label-width="70px"
                                  placeholder="请输入内容"></el-input>
                        <span v-show="!updateUser">{{Info.name}}</span>
                    </td>
                </tr>
                <tr style="height: 260px">
                    <td style="width: 50px"></td>
                    <td style="text-align: left;width: 100px">个人简介:</td>
                    <td style="width: 50px"></td>
                    <td width="300px"><span v-show="!updateUser">{{Info.intro}}</span>
                        <div v-show="updateUser">
                            <el-input
                                    type="textarea"
                                    :rows="4"
                                    placeholder="请输入内容"
                                    v-model="Info.intro">
                            </el-input>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <el-button v-show="!updateUser" type="danger" style="width: 200px" @click="updateUser=true">修改信息</el-button>
                        <el-button v-show="updateUser" type="danger" style="width: 200px" @click="upLoad">保存</el-button>
                        <el-button v-show="updateUser" type="primary" @click="updateUser=false">取消修改</el-button>

                    </td>
                </tr>
            </table>
        </div>
        <div></div>
    </div>
</template>

<script>
    import OSS from "ali-oss";

    export default {
        name: "teacherCenter",
        data() {
            return {
                userData: {},
                Info: {},
                updateUser: false,
            }
        },
        methods: {
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token");
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (successCallback) {
                    if (successCallback.data.code === 2000) {
                        that.userData = successCallback.data.result;
                        that.$http.get(`/core/teacher/findTeacherByMemberId/${that.userData.mobile}`).then(function (success) {
                            if (success.data.code === 200) {
                                that.Info = success.data.result;
                            }
                        })
                    }
                })
            },//修改信息
            upLoad() {
                let that = this;
                that.updateUser = true
                //图片地址
                var avatar = null;
                //获取文件信息
                const files = document.getElementById("uploadImage")
                //如果有文件
                if (files.files.length != 0) {
                    var client = new OSS({
                        region: 'oss-cn-beijing',
                        accessKeyId: 'LTAI5tSg7FEsJYoEwCwy31gB',
                        accessKeySecret: 'TePXV7cvof8Qmstmc59SnCvH8bC9L5',
                        bucket: 'alilitest'
                    });
                    const fileLen = document.getElementById("uploadImage").files
                    const file = document.getElementById("uploadImage").files[0]
                    //文件名
                    let consat = file.name;
                    //获取后缀
                    let fileName = consat.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                    let fileNameLength = consat.length;//取到文件名长度
                    let fileFormat = consat.substring(fileName + 1, fileNameLength);//截
                    if (fileFormat === "png" || fileFormat === "jpg") {
                        //随机名
                        let ronname = Math.round(Math.random() * 1000000000);
                        //最终文件名
                        let name = '/lingke/web/user/' + ronname + '.' + fileFormat
                        for (let i = 0; i < fileLen.length; i++) {
                            const file = fileLen[i]
                            client.multipartUpload(name, file).then(function (res) {
                                that.updateUser = false
                                var str = res.res.requestUrls[0]
                                avatar = str.split("?")[0]
                                that.$emit('childByValue', str.split("?")[0])
                            }).catch((err) => {
                                console.log(err)
                            })
                        }

                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '格式不正确！仅支持png或jpg类型文件'
                        });
                    }
                }

                clearTimeout(this.timer);  //清除延迟执行
                this.timer = setTimeout(() => {   //设置延迟执行获取图片地址
                    if (avatar != null) {
                        that.Info.avatar = avatar;
                    }
                        that.$http.post(`/core/teacher/upTeacherInfo`, that.Info).then(function (success) {
                            if (success.data.code === 200) {
                                that.updateUser = false;
                                that.searchMember();
                                that.$message.success(success.data.msg)
                            } else {
                                that.$message.error(success.data.msg)
                            }
                        })
                        that.updateUser = false;
                        that.searchMember();

                }, 1000);

            }
        },
        created() {
            this.searchMember();
        }
    }
</script>

<style scoped>
    #imgdv {
        background: skyblue;
        width: 66px;
        height: 16px;
        border-radius: 12px;
        padding: 12px 20px;
        float: left;
    }

    #imgsp {
        /*position: relative;*/
        /*top: -15px;*/
        /*left: -3px;*/
        color: white;
        float: right;
    }

    #uploadImage {
        opacity: 0;
        width: 95px;
        height: 39px;
        position: relative;
        top: -30px;
        left: -20px;
    }
</style>